<!--
 * @Author: lixb
 * @Date: 2020-08-19 10:29:30
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-10 15:28:45
 * @Descripttion: 贺卡模板
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="modul-title">
          <img src="@/assets/img/贺卡.png" style="height: 25px;width: 25px;margin-right: 10px;" />
          <span>贺卡模板</span>
        </span>
      </div>
      <div class="text item">
        <el-carousel indicator-position="outside" height="450px" :autoplay="false">
          <el-carousel-item v-for="(item, index) in handleCardList" :key="index">
            <span v-for="(a, ind) in item" :key="ind">
              <img class="greeting-card-item" :src="a" />
            </span>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-card>
  </div>
</template>

<script>
  const guoqing1 = require('@/assets/img/greetCard/guoqing-1.png');
  const guoqing2 = require('@/assets/img/greetCard/guoqing-2.png');
  const guoqing3 = require('@/assets/img/greetCard/guoqing-3.png');
  const zhongqiu1 = require('@/assets/img/greetCard/zhongqiu-1.png');
  const zhongqiu2 = require('@/assets/img/greetCard/zhongqiu-2.png');
  const zhongqiu3 = require('@/assets/img/greetCard/zhongqiu-3.png');
  const shengdan1 = require('@/assets/img/greetCard/shengdan-1.png');
  const shengdan2 = require('@/assets/img/greetCard/shengdan-2.png');
  const shengdan3 = require('@/assets/img/greetCard/shengdan-3.png');
  export default {
    data() {
      return {
        handleCardList: [],
        cardList: [
          guoqing1,
          guoqing2,
          guoqing3,
          zhongqiu1,
          zhongqiu2,
          zhongqiu3,
          shengdan1,
          shengdan2,
          shengdan3,
        ],
      };
    },
    computed: {},
    mounted() {
      this.group(this.cardList, 3);
    },
    methods: {
      /**
       * @Author: lixiangbin
       * @Date: 2020-08-20 15:39:10
       * @Descripttion: 把图片数组每三张图片重新组成一个数组，push到一个新数组中；
       */
      group(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
          newArray.push(array.slice(index, (index += subGroupLength)));
        }
        this.handleCardList = newArray;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-card.is-always-shadow {
    border-radius: 10px;
  }
  .modul-title * {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
  }
  .box-card {
    margin-top: 10px;
    .greeting-card-item {
      width: 30%;
      margin-right: 8px;
      border-radius: 5px;
      object-fit: contain;
      height: 100%;
      float: left;
    }
    .el-carousel__item {
      position: absolute;
      left: 4%;
    }
  }
</style>
